<template>
    <div>
        <div class="title">
            <div>猜你喜欢</div>
        </div>
        <div class="titles">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item,index in list" :key="index" >
                    <ul class="list">
                        <li v-for="items,index in item.items" :key="index"  @click="toDetail(items.id)">
                            <img :src="items.picture" alt="">
                            <div class="Ldiv">{{items.desc}}</div>
                            <p class="Lp">￥{{items.price}}</p>
                        </li>
                    </ul>
                </el-carousel-item>
            </el-carousel>    
        </div>
        
    </div>
</template>
<script>
    export default{
        name:"YouList",
        data() {
            return {
                list:[],
            }
        },
        async created(){
            for(let i=1;i<5;i++){
                let res=await this.$http.guessLike(i,4)
                this.list.push(res.data.result);
            }
        },
        methods:{
            toDetail(id){
                this.$router.push({
                    path:"/details",
                    query:{
                        id
                    }
                })
            },
        }
    }
</script>

<style scoped lang="less">
    *{margin: 0;padding: 0;}
    li{list-style: none;}
    .Ldiv{
        width: 160px;
        margin:0 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #666;
        text-align: center;
    }
    .Lp{
        width: 160px;
        margin:15px 40px 0px;
        text-align: center;
        color: red;
    }
    .titles{
        padding: 0 20px;
    }
    .title{
        padding: 0 20px;
        width: 1200px;
        height: 80px;
        line-height: 80px;
        div{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .list{
        width: calc(100%-80px);
        height: 100%;
        padding: 0 40px;
        display: flex;
        justify-content: space-around;
        li{
            text-align: center;
            img{
                width: 190px;
                height: 190px;
                margin: 20px;
            }
        }
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
</style>